<script setup lang="ts">
defineProps<{
}>()

</script>

<template>
  		<div class="cup">
			<!-- <div class="cup-cover"></div> -->
			<div class="cup-body">
				<div class="mouth">
					<div class="coffee"></div>
				</div>
				<div class="body"></div>
				<div class="bottom"></div>
			</div>
			<div class="cup-handle"></div>
			<div class="vapor">  
				<span></span>  
				<span></span>  
				<span></span>  
			</div>  
		</div>
</template>

<style scoped>
	.cup {
		position: relative;
		width: 10em;
		height: 10em;
		/* background-color: antiquewhite; */
		display: flex;
		align-items: center;
		justify-content: center;
		perspective:110em;
		
		
	}
	.cup .cup-body {
		/* position: absolute; */
		/* width: 80px;
		height: 80px;
		top: 20px;
		left: 10px; */
	}
	.cup .cup-body .mouth {
		width: 3.8em;
		height: 3.8em;
		border-radius: 50%;
		background-color: #ccc;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.2);
		transform: rotate3d(1, 0, 0, 70deg);		
		margin-left: 0.1em;
		border :0.2em solid rgb(120 120 120);
		overflow: hidden;
	}
	.cup .cup-body .mouth .coffee {
		width: 3.8em;
		height: 3.8em;
		border-radius: 50%;
		background-color: rgb(88, 41, 41);
		/* margin-left: 0.3em; */
		margin-top: 2em;
	}
	.cup .cup-body .body {
		width:4em;
		height: 4em;
		background-color: rgb(120 120 120);		
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		border-radius: 0.2em 0.2em 1em 1em;
		margin-top: -2em;
	}

	.cup .cup-body .bottom {
		width: 3em;
		height: 3em;
		border-radius: 50%;
		background-color: rgb(120 120 120);
		/* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
		transform: rotate3d(1, 0, 0, 70deg);	
		margin-top: -1.7em;	
		margin-left: 0.5em;
		box-shadow: 0 0.5em 10px rgba(0, 0, 0, 0.);
	}

		
	.cup .cup-handle {		
		width: 1.5em;
		height: 3em;
		background-color: rgb(162, 119, 79);
		border-radius: 0 0.5em 0.5em 0;
	}
	.cup .cup-handle::after {		
		content: "";
		position: absolute;
		width: 0.5em;
		height: 2em;
		background-color: rgb(214, 214, 214);
		border-radius: 0.5em;
		margin-left: 0.4em;
		margin-top: 0.5em;
	}

	.cup .cup-cover {
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}



		.vapor {  
			position: absolute;  
			bottom: 0; /* 热气从咖啡杯底部升起 */  
			width: 3cqmax;  
			display: flex;  
			justify-content: space-around; /* 热气均匀分布 */  
			margin-bottom: 7em;
			margin-left: -2em;
		}  
		
		.vapor span {  
			width: 0.5em; /* 热气的宽度 */  
			height: 0.3em; /* 热气的初始高度 */  
			border-radius: 0.2em;
			background-color: rgba(229, 228, 228, 0.852); /* 热气的颜色 */  
			opacity: 0.5; /* 透明度，使热气看起来更自然 */  
			animation: rise 3s linear infinite; /* 应用动画 */  
		}  
		
		@keyframes rise {  
			from {  
				transform: translateY(0);  
				opacity: 1;  
			}  
			to {  
				transform: translateY(-5em); /* 热气上升的高度 */  
				opacity: 0;  
			}  
		}  
		
		/* 为每缕热气设置不同的延迟，使效果更自然 */  
		.vapor span:nth-child(1) { animation-delay: 0s; }  
		.vapor span:nth-child(2) { animation-delay: 0.8s; }  
		.vapor span:nth-child(3) { animation-delay: 0.4s; }  
</style>